<template>
    <div>
         <el-alert
            title="专辑名称、图片的上传，一切都由用户管理，管理员不许干预，只能删除不合法的内容图片"
            type="warning"
            center
            show-icon>
        </el-alert>
        <el-card>
            <el-table :data="imgs" style="width: 100%">
                <el-table-column label="图片预览" width="300">
                    <template slot-scope="scope"> 
                        <img :src="`http://localhost:3000/images/cat/${scope.row.cat}/${scope.row.pathName}`">
                    </template>
                </el-table-column>
                <el-table-column label="图片分类">
                    <template slot-scope="scope"> 
                        {{scope.row.cat}}
                    </template>
                </el-table-column>
                <el-table-column label="专辑名称">
                    <template slot-scope="scope"> 
                        {{scope.row.albumName}}
                    </template>
                </el-table-column>
                <el-table-column label="发布的用户">
                    <template slot-scope="scope"> 
                        {{scope.row.user.userName}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="removeImg(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>



            <!-- 分页 -->
            <el-pagination
                background
                :page-size="size"
                :current-page="page"
                @current-change="handleChange"
                layout="prev, pager, next"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import axios from 'axios';
import { onMounted, ref } from '@vue/composition-api';
export default {
    setup(props, context) {
        axios.defaults.baseURL = 'http://localhost:3000';

        onMounted(() => {
            getImgs(1);
        })


        // 总条数
        const total = ref(0);
        // 当前页数
        const page = ref(1);
        // 每页显示条数
        const size = ref(0);

        // 图片
        const imgs = ref([]);
        // 获取图片
        const getImgs = async function (temp) {
            let { data: res } = await axios.get(`/get/imgs/all/${temp}/8`);
            if (res.status != 200)
                return context.parent.$message.error('获取图片数据失败，请刷新后重试');
            total.value = res.data.total;
            page.value = res.data.page;
            size.value = res.data.size;
            imgs.value = res.data.records;
        }

        // 页数改变
        const handleChange = function (page) {
            getImgs(page);
        }

        // 删除图片
        const removeImg = async function (item) {
            let { data: res } = await axios.delete(`/set/remove/img/${item.cat}/${item.pathName}/${size.value}/${page.value}`);
            if (res.status != 200)
                return context.parent.$message.error('删除图片失败，请重试');
            imgs.value = res.newImgs.records;
            context.parent.$message.success('删除图片成功');
        }

        const methods = { 
            handleChange,
            removeImg
        }
        return {
            ...methods,
            page,
            total,
            size,
            imgs
        }
    }
}
</script>

<style lang="less" scoped>
.el-card {
    text-align: center;
}

.el-pagination {
    margin-top: 12px;
}
</style>


<style lang="less" scoped>
img {
    width: 100%;
}
</style>